import { FC } from 'react';
import { useIntl } from 'umi';

//箱子概况组件
import BoxCommon from '../../components/BoxCommon/index';
interface IProps {
  data: API.ApiResultBoxOverviewRealtimeDTO['data'];
}

export const Info: FC<IProps> = ({ data }) => {
  const intl = useIntl();
  const Items = [
    // {
    //   label: intl.formatMessage({ id: 'stationRealtimeMonitoring.CommunicationStatus' }),
    //   value: data?.onlineState,
    //   imgType: 'state',
    // },
    // {
    //   label: intl.formatMessage({ id: 'data.chargeDischargeStatus' }),
    //   value: data?.chargeStatus,
    //   imgType: 'charge',
    // },
    { label: 'SOC', value: data?.soc, imgType: 'soc', unit: '%' },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.realTimePower' }),
      value: data?.power,
      unit: 'kW',
      imgType: 'reltimepower',
    },
  ];

  const chargeData = {
    dailyChargeElectricity: data?.dailyChargeElectricity,
    dailyDisChargeElectricity: data?.dailyDisChargeElectricity,
    chargedEnergy: data?.chargeElectricity,
    dischargedEnergy: data?.disChargeElectricity,
  };

  return (
    <div style={{ padding: '20px 30px', marginBottom: 0 }}>
      <BoxCommon data={data} chargeData={chargeData} Items={Items} />
    </div>
  );
};
